<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons"></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center">
          {{ $t("navs.my") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view slot="gBody">
      <view class="grace-margin-top grace-bg-white">
        <view v-if="user" class="grace-list">
          <view class="grace-list-items grace-padding">
            <view class="grace-list-image ucenter-face grace-relative">
              <image
                class="grace-list-image ucenter-face-image"
                src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png"
                mode="widthFix"
              />
            </view>
            <view class="grace-list-body">
              <view class="grace-list-title">
                <text class="grace-list-title-text">{{ user.username }}</text>
              </view>
              <view class="grace-list-body-desc">描述信息</view>
            </view>
            <text
              class="grace-list-arrow-right grace-icons icon-arrow-right"
            ></text>
          </view>
        </view>
      </view>

      <!-- <view class="grace-bg-white">
        <graceBoxBanner :items="items"></graceBoxBanner>
      </view>-->

      <view class="grace-list grace-margin-top grace-bg-white">
        <!-- <view class="grace-list-items grace-padding">
          <text class="grace-list-icon grace-icons icon-friend grace-blue"></text>
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">好友动态</text>
              <text class="grace-badge grace-bg-red">12</text>
            </view>
          </view>
          <text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
        </view>
        <view class="grace-list-items grace-padding">
          <text class="grace-list-icon grace-icons icon-wallet grace-green"></text>
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">我的钱包</text>
            </view>
          </view>
          <text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
        </view>-->
        <!-- <view class="grace-list-items grace-padding">
          <text class="grace-list-icon grace-icons icon-article grace-blue-sky"></text>
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">我的文章</text>
            </view>
          </view>
          <text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
        </view>-->
        <view
          class="grace-list-items grace-padding"
          @tap.stop="
            handleNavTo({
              url: '/pages/announcement/index'
            })
          "
        >
          <text
            class="grace-list-icon grace-icons icon-speaker grace-red"
          ></text>
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">
                {{ $t("common.title.announcement") }}
              </text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
        <view
          class="grace-list-items grace-padding"
          @tap.stop="
            handleNavTo({
              url: '/pages/auth/cerify'
            })
          "
        >
          <text class="grace-list-icon grace-icons icon-user grace-red"></text>
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">{{ $t("my.verified") }}</text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
        <view
          class="grace-list-items grace-padding"
          @tap.stop="
            handleNavTo({
              url: '/pages/my/bank/index'
            })
          "
        >
          <cloudIcon
            name="iconzhifuguanli"
            class="grace-red grace-list-icon"
            style="font-size:50rpx;"
          ></cloudIcon>
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">
                {{ $t("common.title.bankAccount") }}
              </text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
        <view
          class="grace-list-items grace-padding"
          @tap.stop="
            handleNavTo({
              url: '/pages/otc/otc'
            })
          "
        >
          <cloudIcon
            name="iconfabijiaoyi"
            class="grace-red grace-list-icon"
            style="font-size:50rpx;"
          ></cloudIcon>
          <view class="grace-list-body">
            <view class="grace-list-title">
              <text class="grace-list-title-text">
                {{ $t("common.title.otc") }}
              </text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
      </view>

      <view class="grace-list grace-margin-top grace-bg-white">
        <!-- <view class="grace-list-items grace-padding">
          <text class="grace-list-icon grace-icons icon-set grace-yellow"></text>
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">账户设置</text>
            </view>
          </view>
          <text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
        </view>-->

        <!-- <view class="grace-list-items grace-padding">
          <text class="grace-list-icon grace-icons icon-phone grace-red"></text>
          <view class="grace-list-body grace-border-b">
            <view class="grace-list-title">
              <text class="grace-list-title-text">手机密保</text>
            </view>
          </view>
          <text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
        </view>-->

        <view
          class="grace-list-items grace-padding"
          @tap.stop="
            handleNavTo({
              url: '/pages/auth/security/index'
            })
          "
        >
          <text class="grace-list-icon grace-icons icon-phone grace-red"></text>
          <view class="grace-list-body">
            <view class="grace-list-title">
              <text class="grace-list-title-text">
                {{ $t("my.securityCenter") }}
              </text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
        <view
          class="grace-list-items grace-padding"
          @tap.stop="
            handleNavTo({
              url: '/pages/lang/lang'
            })
          "
          v-if="i18n"
        >
          <text class="grace-list-icon grace-icons icon-txt grace-red"></text>
          <view class="grace-list-body">
            <view class="grace-list-title">
              <text class="grace-list-title-text">
                {{ $t("my.languageSettings") }}
              </text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
        <view
          class="grace-list-items grace-padding"
          @tap.stop="
            handleNavTo({
              url: '/pages/customerService/chat/chat'
            })
          "
        >
          <text class="grace-list-icon grace-icons icon-txt grace-red"></text>
          <view class="grace-list-body">
            <view class="grace-list-title">
              <text class="grace-list-title-text">
                {{ $t("my.customerService") }}
              </text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
        <view class="grace-list-items grace-padding" @tap.stop="checkVersion">
          <text
            class="grace-list-icon grace-icons icon-right grace-blue"
          ></text>
          <view class="grace-list-body">
            <view class="grace-list-title">
              <text class="grace-list-title-text">
                {{ $t("my.checkVersion", { version: version }) }}
              </text>
            </view>
          </view>
          <text
            class="grace-list-arrow-right grace-icons icon-arrow-right"
          ></text>
        </view>
      </view>
      <button
        type="warn"
        @tap.stop="logoutDialogShow = true"
        class="btn-logout grace-button"
        plain="true"
      >
        {{ $t("my.signOut") }}
      </button>
      <graceDialog
        :title="$t('common.title.prompt')"
        :show="logoutDialogShow"
        v-on:closeDialog="logoutDialogShow = false"
      >
        <view slot="content" class="grace-text-center grace-margin-top">
          <text>{{ $t("common.ask.confirmExit") }}</text>
        </view>
        <view slot="btns" class="grace-margin-top grace-space-between">
          <text class="grace-dialog-buttons" @tap="logoutDialogShow = false">
            {{ $t("common.operate.close") }}
          </text>
          <text class="grace-dialog-buttons grace-blue" @tap="handleLogout">
            {{ $t("common.operate.sure") }}
          </text>
        </view>
      </graceDialog>
    </view>
  </cloudPage>
</template>
<script>
import { mapActions, mapGetters, mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      logoutDialogShow: false,
      items: [
        [80, "", "动态"],
        [100, "", "好友"],
        [50, "", "私信"],
        ["￥199", "", "余额"]
      ]
    };
  },
  async onLoad() {
    await this.loadUser();
  },
  computed: {
    ...mapGetters("system", ["version", "i18n"]),
    ...mapState("user", ["user"])
  },
  methods: {
    ...mapActions("system", ["checkVersion"]),
    ...mapActions("user", ["logout", "loadUser"]),
    async handleLogout() {
      this.logoutDialogShow = false;
      this.logout();
      this.handleNavLogin();
      this.makeToast(this.$t("common.tips.exit_success"));
    }
  }
};
</script>
<style scoped>
.ucenter-face {
  width: 100rpx !important;
  height: 100rpx !important;
}
.ucenter-face-image {
  width: 100rpx !important;
  height: 100rpx !important;
}
.btn-logout {
  margin: 40rpx 50rpx 40rpx;
  line-height: 70rpx;
}
</style>
